<template>
	<view class="">
		<view :class="'flex-box flex-wrap list-'+type +' button-'+buttonStyle+' button-size-'+size" v-if="type == 'checkbox'">
			<view :class="'item-col-'+column" v-for="(item,index) in items" :key="index">
				<view class="flex-box">
					<view class="item" :class="{'active':item.isCheck,'with-tip':item.tip?true:false}" 
						:style="[{'background':item.isCheck?activeBgColor:bgColor,'color':item.isCheck?activeTextColor:textColor},customStyle]"
						@click="checkboxBtn(index,item.id,item,$event)">
						<view>
							<image v-if="item.image" class="imageItem" :src="item.image" mode="widthFix"></image>
							<uni-icons v-if="item.icon" style="margin-right:4px;" :type="item.icon.type" :color="item.icon.color" :size="item.icon.size" ></uni-icons>
							<text class="texts" :style="{'fontSize':fontSize}" v-if="item.name">{{item.name}}</text>
							
							<slot :name="'content-'+index" :item="item"></slot>
						</view>
						<text class="tips" v-if="item.tip">{{item.tip}}</text>
					</view>
					<view v-if="subType" @click="subClick(index,item,$event)" :style="subStyle">
						<uni-icons v-if="subType=='icon'" style="margin-left:5px;margin-right:10px;" :type="subValue" size="20"></uni-icons>
						<text v-else>{{subValue}}</text>
					</view>
				</view>
			</view>
			<view v-if="!items || items.length<1">
				<text>{{emptyPlaceholder}}</text>
			</view>
		</view>
		<view :class="'flex-box flex-wrap list-'+type+' button-'+buttonStyle+' button-size-'+size" v-else>
			<view :class="'item-col-'+column" v-for="(item,index) in items" :key="index">
				<view class="flex-box">
					<view class="item" :class="{'active':checkValue == item[returnType],'with-tip':item.tip?true:false}"
						:style="[{'background':checkValue == item[returnType]?activeBgColor:bgColor,'color':checkValue == item[returnType]?activeTextColor:textColor},customStyle]"
						@click="checkBtn(index,item.id,item,$event)">
						<view>
							<image v-if="item.image" class="imageItem" :src="item.image" mode="widthFix"></image>
							<uni-icons v-if="item.icon" style="margin-right:4px;" :type="item.icon.type" :color="item.icon.color" :size="item.icon.size" ></uni-icons>
							<text class="texts" :style="{'fontSize':fontSize}" v-if="item.name">{{item.name}}</text>
							
							<slot :name="'content-'+index" :item="item"></slot>
						</view>
						<text class="tips" v-if="item.tip">{{item.tip}}</text>
					</view>
					<view v-if="subType" @click="subClick(index,item,$event)" :style="subStyle">
						<uni-icons v-if="subType=='icon'" style="margin-left:5px;margin-right:10px;" :type="subValue" size="20"></uni-icons>
						<text v-else>{{subValue}}</text>
					</view>
				</view>
			</view>
			<view v-if="!items || items.length<1">
				<text>{{emptyPlaceholder}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: [String, Number,Array,Object],
				default: ''
			}, 
			/* 按钮列表 */
			list: {
				type: [Array,Object],
				default () {
					return []
				}
			},
			/* 默认按钮样式 */
			buttonStyle: {
				type: String,
				default () {
					return "gray"
				}
			},
			size: {
				type: String,
				default () {
					return "default"
				}
			},
			/* 默认字体颜色 */
			textColor: {
				type: String,
				default () {
					return "#666666"
				}
			},
			/* 选择字体颜色 */
			activeTextColor: {
				type: String,
				default () {
					return "#409dff"
				}
			},
			/* 一行多个个 */
			column: {
				type: [String,Number],
				default () {
					return 0
				}
			},
			
			/* 默认背景色 */
			bgColor: {
				type: String,
				default () {
					return "#f6f6f6"
				}
			},
			/* 选择后的背景色 */
			activeBgColor: {
				type: String,
				default () {
					return "#cae4ff"
				}
			},
			returnType: {
				type: String,
				default () {
					return "id"
				}
			},
			emptyPlaceholder: {
				type: String,
				default () {
					return ""
				}
			},
			
			//附加到前面
			preList: {
				type: [String, Number,Array,Object],
				default () {
					return ""
				}
			},	
			//附加项，跟在选项按钮的后面，可用于删除等管理 
			subType: {
				type: String,
				default () {
					return ""
				}
			},	
			subValue: {
				type: String,
				default () {
					return ""
				}
			},
			subStyle: {
				type: String,
				default () {
					return ""
				}
			},
			
			/* 单选还是多选 */
			type: {
				type: String,
				default () {
					return "radio"
				}
			},
			/* 自定义按钮样式 */
			customStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			propId: {
				type: String,
				default: () => {
					return 'id'
				}
			},
			propName: {
				type: String,
				default: () => {
					return 'name'
				}
			},
			propTip: {
				type: String,
				default: () => {
					return 'tip'
				}
			},
			defaultImage: {
				type: String,
				default: ''
			},
			propImage: {
				type: String,
				default: ''
			},
			//定义图标
			defaultIconType: {
				type: String,
				default: ''
			},
			propIconType: {
				type: String,
				default: ''
			},
			propIconColor: {
				type: String,
				default: ''
			},
			propIconSize: {
				type: String,
				default: ''
			},
			/* 字体大小 */
			fontSize: {
				type: String,
				default () {
					return "26rpx"
				}
			},
		},
		data() {
			return {
				checkValue: this.value,
				items: [],
			}
		},
		created() {
			
		},
		mounted() {
			this.getList(this.list);

		},
		watch:{
			// 监听下标的变化
			buttonStyle(val){
				if (val==='gray'){
					this.textColor ='#333';
					this.bgColor ='#ddd';
					this.activeTextColor ='#fff';
					this.activeBgColor ='#00a4ff';				
				}
			},
			value: {
				handler(newVal) {
					this.checkValue = newVal
				},
				immediate: true
			},
			list: {
				handler(newVal) {
					//console.log('handler---------------------------');
					this.getList(newVal);
				},
				immediate: true
			},
		},
		methods: {
			append(data,key=''){
				let current,icon,image,obj;
				let item ={index:this.items.count,isCheck:false,tip:'',value:data.value?data.value:data};
				if (typeof(data)==='object') {
					if (this.propId.indexOf('{')>=0){
						item.id=this.propId.replace(/{([^{}]+)}/g, (index, p)=>{
							return data[p]
						});
					}else{
						item.id=data[this.propId];
					}
					if (this.propName.indexOf('{')>=0){
						item.name=this.propName.replace(/{([^{}]+)}/g, (index, p)=>{
							return data[p]
						});
					}else{
						item.name=data[this.propName];
					}
					if (this.propTip.indexOf('{')>=0){
						item.tip=this.propTip.replace(/{([^{}]+)}/g, (index, p)=>{
							return data[p]
						});
					}else{
						item.tip=data[this.propTip];
					}
					current = data;
				}else{
					obj = {id:key,name:data};
					if (this.propId.indexOf('{')>=0){
						item.id=this.propId.replace(/{([^{}]+)}/g, (index, p)=>{
							return obj[p]
						});
					}else{
						item.id=obj[this.propId];
					}
					if (this.propName.indexOf('{')>=0){
						item.name=this.propName.replace(/{([^{}]+)}/g, (index, p)=>{
							return obj[p]
						});
					}else{
						item.name=obj[this.propName];
					}
					if (this.propTip.indexOf('{')>=0){
						item.tip=this.propTip.replace(/{([^{}]+)}/g, (index, p)=>{
							return data[p]
						});
					}else{
						item.tip=data[this.propTip];
					}
					current = item;
				 }
				 
				 icon = false,image = false;
				 if (this.propIconType || this.defaultIconType){
					icon={
						type:this.propIconType&& current[this.propIconType]?current[this.propIconType]:this.defaultIconType,
						color:this.propIconColor&& current[this.propIconColor]?current[this.propIconColor]:this.defaultIconColor,
						size:this.propIconSize&& current[this.propIconSize]?current[this.propIconSize]:this.defaultIconSize,
					}
				 }
				 if (this.propImage || this.defaultImage){
					image = this.propImage&& current[this.propImage]?current[this.propImage]:this.defaultImage;
				 }
				 item.icon = icon
				 item.image = image;
				 
				this.items.push(item);
			},
			getList(list){
				this.items = [];
				if (this.preList){
					if (typeof this.preList =='string' || typeof this.preList =='number'){
						let item = {};
						item[this.propId] = '';item[this.propName] = this.preList;
						this.append(item);
					}else{
						for (let i in this.preList) {
							if (this.preList[i]){
								this.append(this.preList[i],i);
							}
						}
					}
					
				}
				for (let i in list) {
					if (list[i]){
						this.append(list[i],i);
					}
				}
			},
			/* 单选 */
			checkBtn(index,id, info,e) {
				//console.log('e',e,JSON.stringify(info));
				if (this.returnType == 'id' || this.returnType == 'name' || this.returnType == 'index' ){
					this.checkValue = info[this.returnType];
				}else if (this.returnType == 'value'){
					this.checkValue = info.value;
				}else if (this.returnType == 'value'){
					this.checkValue = index;
				}else{
					this.checkValue = info.value;
				}
				for (var i in this.items){
					if (this.items[i] && this.items[i].isCheck){
						this.items[i].isCheck = false;
					}
				}
				this.items[index].isCheck = true;
				
				//console.log('checkBtn',this.checkValue);
				this.$emit('input', this.checkValue);
				//this.$emit('change', this.checkValue);
				this.$emit("change", index,this.checkValue,info,e);//触发的双向绑定
			},
			/* 多选 */
			checkboxBtn(index,id, info,e) {
				// info.isCheck = true;
				let items = [...this.items];
				if (items[index].isCheck == false) {
					items[index].isCheck = true;
				} else {
					items[index].isCheck = false;
				}
				
				let value = [];
				for (var i in items){
					if (items[i] && items[i].isCheck){
						if (this.returnType == 'id' || this.returnType == 'name' ){
							value.push(items[i][this.returnType]);
						}else if (this.returnType == 'value'){
							value.push(items[i].value);		
						}else if (this.returnType == 'index'){
							value.push(i);		
						}else{
							value.push(items[i].value);
						}
					}
				}
				this.items = items;
				this.checkValue = value;
				//console.log('value',value);
				this.$emit("input", this.checkValue);
				let val = id;
				if (this.returnType == 'id' || this.returnType == 'name' ){
					val = info[this.returnType];
				}else{
					val = info.value;
				}
				this.$emit("change", index,val,info,e);
				
			},
			subClick(index, info,e) {
				this.$emit("subclick", index,info,e);//触发的双向绑定
			},
		}
	}
</script>

<style scoped>
	.flex-wrap {
		flex-wrap: wrap;
	}

	/* flex横向左右两边布局*/

	.flex-space-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	/* flex垂直居中布局*/

	.flex-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	/* flex横向不居中布局 */

	.flex-box {
		display: flex;
		align-items: stretch;
		height: 100%;
		width:100%;
	}

	/* flex横向居中布局 */
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* flex横向平均布局 */

	.flex-space-around {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	/* flex 布局 */
	.flex {
		display: flex;
		flex-direction: row;
	}

	/* flex1 */
	.flex1 {
		flex: 1;
	}

	.item {
		box-sizing: border-box;
		padding:10rpx 30rpx;
		background-color: #f6f6f6;
		color: #666666;
		border-radius: 10rpx;
		margin: 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		min-height:70rpx;

		width: 100%;
	}
	
	.active::after {
	    content: ' ';
	    position: absolute;
	    display: inline-block;
	    width: 10rpx;
	    height: 6rpx;
	    border-width: 0 0 3rpx 3rpx;
	    overflow: hidden;
	    border-color: #fff;
	    border-style: solid;
	    -webkit-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    right: 4rpx;
	    top: 4rpx;
	  }
	
	.active::before{
		content: ' ';
		border: 16rpx solid #55aaff;
		border-left: 16rpx solid transparent;  
		border-bottom: 16rpx solid transparent; 
		/*跟card的border-radius设置的值一致*/
		border-top-right-radius: 10rpx;
		position: absolute;      
		width: 0;  
		right: 0;
		top:0;
	}
	.tips{
		margin-left:5px;
	}
	.item-col-0{
		
	}
	.item-col-1{
		width:100%;
	}
	.item-col-1 .item{
		height:70rpx;
	}
	.item-col-2{
		width:50%;
	}
	.item-col-3{
		width:33.33%;
	}
	.item-col-3 .item{
		padding: 10rpx 20rpx;
	}
	.item-col-4{
		width:25%;
	}
	.item-col-4 .item{
		padding: 10rpx 10rpx;
	}
	.item-col-5{
		width:20%;
	}
	.item-col-5 .item{
		padding: 10rpx 10rpx;
	}
	.item-col-6{
		width:16.66%;
	}
	.item-col-6 .item{
		padding: 10rpx 10rpx;
	}
	.item_y {
		background-color: #cae4ff;
		color: #409dff;
	}
	.button-size-big .item {
		min-height:80rpx;
		height: 100rpx;
	}
	
	.button-size-small .item {
		padding: 10rpx 20rpx;
		height: auto;
		min-height:56rpx;
	}
	.button-size-mini .item {
		padding: 6rpx 20rpx;
		height: auto;
		min-height:50rpx;
	}
	.button-round .item {
		height: auto;
		border-radius: 30rpx;
		border: 1rpx solid #eee;
	}
	.button-round  .active::before {
		border:none;
	}
	.button-round  .active::after {
		border:none;
	}
	.button-switch .item {
		margin: 5px 0;
		height: auto;
		border-radius: 0;
		border-left: 1rpx solid #eee;
	}
	
	
	.button-switch  .active::before,.button-round-switch .active::before {
		border:none;
	}
	.button-switch  .active::after,.button-round-switch .active::after {
		border:none;
	}
	.button-switch  >view:first-child .item {
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.button-switch  >view:last-child .item {
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
	.button-switch .item,.button-round-switch .item {
		margin: 5px 0;
		height: auto;
		border-radius: 0;
		border-left: 1rpx solid #eee;
	}

	.button-round-switch  >view:first-child .item {
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		padding-left:20rpx;
	}
	.button-round-switch  >view:last-child .item {
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		padding-right:20rpx;
	}
	.with-tip{
		flex-direction: column;
	}
</style>
